<template>
  <div class="columns is-mobile is-centered">
    <div class="column oolong-form-background">
      <div class="oolong-form-padding">
        <p class="oolong-titile">
          <span>{{ titleName }}</span>
        </p>
        <p>
          <slot name="prompt"></slot>
        </p>
        <p>
          <i class="oolong-user"></i>
          <i class="oolong-reset" v-show="isUserResetShow" @click="resetUser"></i>
          <input class="oolong-input-account input" type="text" placeholder="请输入账号" v-model="user"
                 @focus="resetPrompt"/>
        </p>
        <p>
          <i class="oolong-password"></i>
          <i class="oolong-reset" v-show="isPasswordResetShow" @click="resetPassword"></i>
          <input class="oolong-input-account input" type="password" placeholder="请输入密码" v-model="password"
                 @focus="resetPrompt"/>
        </p>
        <p class="oolong-verification-code" v-show="captchaShow">
          <slot name="captcha"></slot>
        </p>
        <p>
          <a class="oolong-button button is-primary is-outlined buttonwidth"
             :class="isDisabled ? 'oolong-button-disabled' : 'oolong-button-available'" @click="login">
            <span class="oolong-button-font">登录</span>
          </a>
        </p>
        <hr/>
      </div>
    </div>
  </div>
</template>

<script>
import Icon from '../components/icon'

export default {
  props: {
    titleName: {
      type: String,
      default: ''
    },
    captcha: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 登录信息
      user: '',
      password: '',
      // 提示信息
      isPrompt: {
        // 重置图片提示状态
        userResetShow: false,
        passwordResetShow: false,
        // 按键可用状态
        disabled: true
      },
      // 点击登录次数
      isFirstLogin: true,
      // 验证码是否显示
      captchaShow: false
    }
  },
  components: {
    Icon
  },
  computed: {
    // 重置图片隐藏/显示功能
    isUserResetShow() {
      if (this.user.length > 0) {
        // eslint-disable-next-line no-return-assign,vue/no-side-effects-in-computed-properties
        return this.isPrompt.userResetShow = true;
      } else {
        // eslint-disable-next-line no-return-assign,vue/no-side-effects-in-computed-properties
        return this.isPrompt.userResetShow = false;
      }
    },
    isPasswordResetShow() {
      if (this.password.length > 0) {
        // eslint-disable-next-line no-return-assign,vue/no-side-effects-in-computed-properties
        return this.isPrompt.passwordResetShow = true;
      } else {
        // eslint-disable-next-line no-return-assign,vue/no-side-effects-in-computed-properties
        return this.isPrompt.passwordResetShow = false;
      }
    },
    // 按键可用状态
    isDisabled() {
      if (this.isFirstLogin) {
        if (this.user.length > 0 && this.password.length > 0) {
          // eslint-disable-next-line no-return-assign,vue/no-side-effects-in-computed-properties
          return this.isPrompt.disabled = false;
        } else {
          // eslint-disable-next-line no-return-assign,vue/no-side-effects-in-computed-properties
          return this.isPrompt.disabled = true;
        }
      } else {
        if (this.user.length > 0 && this.password.length > 0 && this.captcha.length > 0) {
          // eslint-disable-next-line no-return-assign,vue/no-side-effects-in-computed-properties
          return this.isPrompt.disabled = false;
        } else {
          // eslint-disable-next-line no-return-assign,vue/no-side-effects-in-computed-properties
          return this.isPrompt.disabled = true;
        }
      }
    }
  },
  methods: {
    // 隐藏提示信息
    resetPrompt() {
      this.$emit('resetPrompt');
    },
    // 账号重置
    resetUser() {
      this.user = '';
    },
    // 密码重置
    resetPassword() {
      this.password = '';
    },
    login() {
      let user = this.user;
      let password = this.password;
      let isFirstLogin = this.isFirstLogin;
      let arg = {user, password, isFirstLogin};
      // 按键有效时才可以登录
      if (this.isPrompt.disabled) {
        return;
      }
      this.$emit('on-click', arg);
    }
  }
}
</script>

<style lang="scss" scoped>
//表单背景
$form-background: #ffffff;
//间距20px
$spacing: 20px;

//表单框
.oolong-form-background {
  //边框样式
  border-style: solid;
  border-width: 1px;
  border-color: #cbcdca;
  margin-top: 46%;
  background-color: $form-background;
  //重叠优先级
  z-index: 80;
  //表单
  .oolong-form-padding {

    //内边距
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 10%;
    padding-right: 10%;

    //表单标题
    .oolong-titile {
      font-size: 16px;
      font-weight: 700;
      color: #FF9900;
    }

    //提示信息
    .oolong-Prompt {
      font-size: 14px;
      margin-top: 10px;
      color: #fa5151;
    }

    //账号输入input
    .oolong-input-account {
      padding-left: 50px;
      width: 100%;
      height: 40px;
      margin-top: $spacing
    }

    //验证码模块
    .oolong-verification-code {
      margin-top: 10px;

      //验证码信息提示
      .oolong-code-information {
        display: inline-block;
        height: 40px;
        line-height: 40px;
      }

      //验证码
      .oolong-code {
        margin-left: 10px;
        width: 38%;
        height: 40px;
      }

      //验证码图片
      .oolong-code-img {
        vertical-align: top;
        margin-left: 10px;
        width: 25.5%;
        height: 40px;
        /* border: none;*/
        border-color: #cccccc;
        border-radius: 4px 4px 4px 4px;
        /* !* 必需 *!
         .expand-transition {
           transition: all .3s ease;
           background-color: #eee;
           overflow: hidden;
         }
         !* .expand-enter 定义进入的开始状态 *!
         !* .expand-leave 定义离开的结束状态 *!
         .expand-enter, .expand-leave {
           height: 0; !*padding: 0 10px;*!
           opacity: 0;
         }*/
      }
    }

    //提交按键
    .oolong-button {
      width: 100%;
      height: 40px;
      margin-top: $spacing;
      border: none;

      .oolong-button-font {
        font-size: 14px;
        color: #ffffff;
      }
    }

    //按键可以用颜色
    .oolong-button-available {
      background: #48babb;
    }

    //按键不可用颜色
    .oolong-button-disabled {
      background: #cccccc;
    }

    //用户图片
    .oolong-user {
      border-radius: 4px 0px 0px 4px;
      margin-top: 20px;
      position: absolute;
      background: url('../assets/img/user.png') no-repeat;
      /* background:#cccccc;*/
      height: 40px;
      width: 40px;
      //重叠优先级
      z-index: 5;
    }

    //密码图片
    .oolong-password {
      border-radius: 4px 0px 0px 4px;
      margin-top: 20px;
      position: absolute;
      background: url('../assets/img/password.png') no-repeat;
      height: 40px;
      width: 40px;
      //重叠优先级
      z-index: 100;
    }

    //重置图片
    .oolong-reset {
      //fullhd
      @media only screen and (min-width: 1408px) {
        left: 58%;
      }
      //widescreen
      @media only screen and (min-width: 1216px) and (max-width: 1407px) {
        left: 58%;
      }
      //desktop
      @media only screen and (min-width: 1024px) and (max-width: 1215px) {
        left: 86%;
      }
      //tablet
      @media only screen and (min-width: 769px) and (max-width: 1023px) {
        left: 82%;
      }
      //mobile
      @media only screen and (min-width: 415px) and (max-width: 768px) {
        left: 86%;
      }
      @media only screen and (max-width: 415px) {
        left: 82%;
      }
      margin-top: 30px;
      position: absolute;
      background: url('../assets/img/reset.png') no-repeat;
      height: 40px;
      width: 40px;
      //重叠优先级
      z-index: 100;
    }
  }
}
</style>
